<template>
	<div class="app-container">
		<div class="btn-return" @click="back">
			<img src="../../../assets/images/return.png" alt="" />
			返回
		</div>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px">
					<el-form-item label="商品名称：">
						<el-input v-model.trim="queryParams.uuid" placeholder="请输入商品名称" clearable />
					</el-form-item>

					<el-form-item label="手机号码：">
						<el-input v-model.trim="queryParams.mobile" placeholder="请输入手机号码" maxlength="11" clearable />
					</el-form-item>
					<el-form-item label="用户ID：">
						<el-input v-model.trim="queryParams.mobile" placeholder="请输入用户ID" maxlength="6" clearable />
					</el-form-item>
					<el-form-item label="寄售状态：">
						<el-select v-model.trim="queryParams.type" filterable clearable placeholder="请选择收支类型">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="时间:：">
						<el-date-picker v-model.trim="queryParams.sendTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"> </el-date-picker>
					</el-form-item>

					<span class="search-btn" style="margin-left: 20px" @click="queryList">搜索</span>
					<!--          <span class="search-btn" @click="queryList" style="margin-left: 10px">Excel导出</span>-->
				</el-form>
			</div>
			<el-table v-loading="loading" stripe :data="goodsList" class="table">
				<!--        <el-table-column :formatter="emptyToString" type="selection" width="55" align="center" />-->
				<el-table-column :formatter="emptyToString" type="index" label="序号" prop="id"></el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="商品ID" prop="id"> </el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="商品名称" width="150px" prop="goods_name" show-overflow-tooltip>
					<template slot-scope="scope">
						<div class="goods-name-style">
							{{ scope.row.name }}
						</div>
					</template>
				</el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="商品图片">
					<template slot-scope="scope">
						<el-image style="width: 50px; height: 50px" :src="scope.row.picUrl" :preview-src-list="[scope.row.picUrl]"></el-image>
					</template>
				</el-table-column>

				<el-table-column :formatter="emptyToString" align="center" label="用户ID" prop="uuid"></el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="手机号码" prop="mobile"></el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="价格" prop="PaymentType" />
				<el-table-column :formatter="emptyToString" align="center" label="浏览量" prop="user_income" />
				<el-table-column :formatter="emptyToString" align="center" label="状态" prop="type" />
				<el-table-column :formatter="emptyToString" align="center" label="时间" prop="create_time" />
			</el-table>
			<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
		</el-card>
	</div>
</template>
<script>
import { getEarningsRecord } from '@/api/mall/about';
import { formatDate } from '@/utils/index';
export default {
	name: 'Index',
	components: {},
	data() {
		return {
			options: [
				{
					value: '',
					label: '全部',
				},
				{
					value: '1',
					label: '管理奖',
				},
				{
					value: '2',
					label: '未拼中',
				},
				{
					value: '3',
					label: '奖金池',
				},
				{
					value: '4',
					label: '每日清空分配',
				},
			],
			loading: false,
			total: 0,
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				categoryId: null,
				date: [],
			},
			goodsList: [],
		};
	},
	created() {
		// this.getList();
	},
	methods: {
		back() {
			this.$router.back();
		},
		queryList() {
			// this.queryParams.pageNum = 1
			// this.getList()
		},
		getList() {
			this.loading = true;
			let obj = JSON.parse(JSON.stringify(this.queryParams));
			if (obj.date) {
				obj.beginTime = obj.date[0];
				obj.endTime = obj.date[1];
			}
			delete obj.date;
			getEarningsRecord(obj).then((response) => {
				this.goodsList = response.data.records;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		//1管理奖 2未拼中 3奖金池
		formatterType(row, column, cellValue, index) {
			switch (cellValue) {
				case 1:
					return '管理奖';
				case 2:
					return '未拼中';
				case 3:
					return '奖金池';
				default:
					return '-';
			}
		},
		time(cellValue) {
			return formatDate(new Date(cellValue.create_time));
		},
		paymentType(row, column, cellValue, index) {
			switch (cellValue) {
				case 1:
					return '收入';
				case 2:
					return '支出';
				default:
					return '-';
			}
		},
	},
};
</script>
<style scoped lang="scss">
.btn-return {
	width: 92px;
	height: 30px;
	background: #6373ee;
	opacity: 1;
	border-radius: 20px;
	display: flex;
	color: #ffffff;
	font-size: 14px;
	line-height: 30px;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04);
	margin-bottom: 20px;
	img {
		display: block;
		width: 15px;
		flex-shrink: 0;
		height: 14px;
		margin-right: 6px;
	}
}
.btn-box {
	display: flex;
	justify-content: center;
	.btn2 {
		background: #1a2483;
		opacity: 1;
		border: none;
	}
	.btn {
		width: 236px !important;
		line-height: 60px;
		height: 60px;
		padding: 0;
		text-align: center;
	}
}
.edit-form {
	.goods-info {
		display: flex;
		border-radius: 8px;
		border: 1px dashed transparent;
		background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, #ccc 0, #ccc 0.25em, white 0, white 0.75em);
		width: 100%;
		height: 127px;
		box-sizing: border-box;
		padding: 14px 18px;
		.right {
			padding-left: 30px;
			font-size: 16px;
			overflow: hidden;
			flex: 1;
			.goods-name {
				color: #333333;
			}
			.goods-id {
				color: #808a97;
				margin-top: 15px;
			}
			.goods-price {
				color: #f14a46;
				font-weight: 900;
				margin-top: 15px;
				span {
					font-size: 10px;
				}
			}
		}
		img {
			display: block;
			width: 100px;
			height: 100px;
			border-radius: 8px;
		}
	}
	.title {
		text-align: left;
		vertical-align: middle;
		font-size: 14px;
		color: #606266;
		line-height: 40px;
		font-weight: bold;
	}
}
.bottom-btn-box {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 20px;
	> div {
		position: absolute;
		font-size: 14px;
		height: 60px;
		line-height: 60px;
		left: 80px;
		span {
			color: #f14a46;
		}
	}
	.btn {
		width: 236px;
		height: 60px;
		padding: 0;
		font-size: 18px;
	}
	.btn2 {
		background: #1a2483;
		border: none;
	}
}
.commit-btn {
	width: 494px;
	height: 60px;
	background: #1a2483;
	opacity: 1;
	padding: 0;
	border-radius: 4px;
	text-align: center;
	margin: 0px auto;
	border: 1px;
	color: #ffffff;
	font-size: 18px;
}
.pl-edit-btn {
	width: 75px;
	height: 35px;
	background: #6373ee;
	opacity: 1;
	font-size: 12px;
	padding: 10px 12px;
	text-align: center;
	border: none;
	margin-left: 10px;
	&:hover {
		background: #6373ee;
		opacity: 1;
	}
}
.select-btn {
	width: 100px;
	height: 36px;
	background: #1a2483;
	opacity: 1;
	border: none;
	&:hover {
		background: #1a2483;
		opacity: 1;
	}
}
.search-btn {
	width: 100px;
	height: 36px;
	background: #1a2483;
	opacity: 1;
	padding: 0;
	color: #fff;
	border: none;
	border-radius: 4px;
	text-align: center;
	line-height: 36px;
	font-size: 12px;
	display: inline-block;
	cursor: pointer;
}
.add-btn {
	width: 100px;
	height: 36px;
	background: #1a2483;
	opacity: 1;
	padding: 0;
	color: #fff;
	border: none;
	border-radius: 4px;
	text-align: center;
	line-height: 36px;
	font-size: 12px;
	cursor: pointer;
}
.table {
	margin-top: 20px;
	border: 1px solid #f7f7f7;
	opacity: 1;
	border-radius: 10px;
	.btn {
		height: 36px;
		border: none;
		border-radius: 4px;
		color: #ffffff;
	}
	.btn1 {
		background: #6373ee;
	}
	.btn2 {
		background: #1d2eb8;
	}
	.btn3 {
		background: #1a2483;
	}
}
</style>
